/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<!-- 征收房屋类型 -->

<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">征收房屋类型</b>
    </p>
    <div class="main">
      <v-chart auto-resize :options="options" style="width: 100%; height: 130px;" ref="chart"/>
    </div>
  </div>
</template>
<script>
import ECharts from "vue-echarts";
var category = ["其他", "商业", "办公", "住宅"];
var barData = [6800, 2100, 800, 500];

const getChartOptions = data => {
  if (!data) return {};
  let chartOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: 0,
      left: "3%",
      right: 55,
      bottom: -15,
      containLabel: true
    },
    xAxis: {
      type: "value",
      show: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      data: ["其他", "商业", "办公", "住宅"],
      splitLine: { show: false },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12
      }
    },
    series: [{
      name: "房屋征收类型",
      type: "bar",
      data: [data.other, data.business, data.business, data.live],
      barWidth: 14,
      barGap: 14,
      smooth: true,
      label: {
        normal: {
          show: true,
          position: "right",
          offset: [5, 2],
          textStyle: {
            color: "#616161",
            fontSize: 12
          },
          formatter: "{c}万㎡"
        }
      },
      itemStyle: {
        emphasis: {
          barBorderRadius: 7
        },
        normal: {
          barBorderRadius: 7,
          color: new ECharts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "rgba(51, 153, 255,1)" },
            { offset: 1, color: "rgba(51, 153, 255,0.3)" }
          ])
        }
      }
    }]
  };
  return chartOption;
};
export default {
  props: {
    house: [Object]
  },
  watch: {
    house: function(data) {
      this.options = getChartOptions(data);
    }
  },
  data() {
    return {
      options: getChartOptions(this.house),
    };
  },

  mounted() {

  },
  methods: {

  },
  components: {
    "v-chart": ECharts
  }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();

  #map-content {
    .be-full();
  }
}

</style>
